<template>
	<div class="list pb50 mb10">
		<ul>
			<li
				class="ml10 mr10 mt10 bgwhite shadow br4"
				:key="idx"
				v-show="holdOrderShow(item)"
				v-for="(item,idx) in this.quotaOrder"
			>
				<div class="wrap">
					<p class="lh30 mt5 clearfix fs12 pl10 pr10">
						<span class="fl tl name fs14">{{item.varietyName}}</span>
						<span
							class="fl cube white"
							:class="item.direction==1?'bgred':'bggreen'"
						>{{item.direction==1?'涨':'跌'}}</span>
						<span class="fl hand tr">{{item.handsNum}}手</span>
						<span class="fl ml5" v-show="item.orderMode==1">市</span>
						<span class="fl ml5" v-show="item.orderMode==2">高</span>
						<span class="fl ml5" v-show="item.orderMode==3">挂</span>
						<span class="fl ml5">{{item.tradeMode==0?'元':'角'}}</span>
						<span
							class="fr loss ml5"
							:class="{red:item.earnMoney>=0,green:item.earnMoney<0}"
						>￥{{item.earnMoney*item.ratio|formatMoney()}}</span>
					</p>
					<p class="lh30 clearfix pl10 pr10 mt5">
						<span class="fl">
							<i
								class="fs14 green"
							>{{item.stopLossMoney|formatPoint(item.marketPoint)}}(¥{{item.stopLossPrice*item.handsNum*item.tradeRate*item.ratio|formatMoney()}})</i>
							<i class="fs12">止损价</i>
						</span>
						<span class="fr">
							<i class="fs14 mr10">{{item.realAvgPrice|formatPoint(item.marketPoint)}}</i>
							<i class="fs12">买入价</i>
						</span>
					</p>
					<p class="lh35 clearfix pl10 pr10">
						<span class="fl">
							<i
								class="fs14 red"
							>{{item.stopWinMoney|formatPoint(item.marketPoint)}}(¥{{item.stopWinPrice*item.handsNum*item.tradeRate*item.ratio|formatMoney()}})</i>
							<i class="fs12">止盈价</i>
						</span>
						<span class="fr">
							<i class="fs14 mr10">{{item.lastPrice|formatPoint(item.marketPoint)}}</i>
							<i class="fs12">当前价</i>
						</span>
					</p>
					<p class="lh35 action" v-show="item.orderStatus==1">
						<em>买处理中</em>
					</p>
					<p class="lh35 action fs14 fontc0 flex" v-show="item.orderStatus==2">
						<span class="flex1 tc rl" @click="toDetail(item)">
							<!-- <router-link :to="{path:'/detailorder',query: {batchNo:item.batchNo,varietyType:item.varietyType,gold:gold,contractsCode: item.contractsCode}}"> -->
							<!-- <router-link :to="{ name: 'detailorder', params: { userId: 123 }}"> -->
							<img :src="detailIcon" width="15" height="15" alt>
							<span>详情</span>
							<!-- </router-link> -->
						</span>
						<span class="flex1 tc" @click.stop="sell(item)">
							<img :src="windIcon" width="15" height="15" alt>
							<span>平仓</span>
						</span>
					</p>
					<p class="lh35 mt5 action" v-show="item.orderStatus==3">
						<em>平仓处理中</em>
					</p>
				</div>
			</li>
			<li class="ml10 mr10 mt20 fontc3" style="display: list-item;" v-show="this.quotaOrder.length<=0">
				<router-link to="/quota">
					<em class="lh50 fontc3">暂无持仓</em>
					<em class="lh50 fontc2">,去下单</em>
				</router-link>
			</li>
		</ul>
	</div>
</template>
<script>
import axios from 'axios'
import { mapState, mapMutations } from 'vuex'
export default {
	name: 'basehigh',
	data() {
		return {
			detailIcon: './static/imgs/detail.svg',
			windIcon: './static/imgs/windicon.svg'
		}
	},
	props: {
		quotaOrder: {
			type: Array,
			required: true,
			default: []
		},
		holdOrderShow: {
			type: Function,
			required: true,
			default: () => {}
		}
	},
	computed: {
		...mapState(['gold', 'allVariety'])
	},
	methods: {
		...mapMutations(['setCurVariety']),
		toDetail(item) {
			this.allVariety.forEach((v, i) => {
				if (v.varietyType === item.varietyType) {
					this.$store.commit('setCurVariety', v)
				}
			})
			// path:'/detailorder',query: {batchNo:item.batchNo,varietyType:item.varietyType,gold:gold,contractsCode: item.contractsCode}
			this.$router.push({
				name: 'detailorder',
				query: {
					batchNo: item.batchNo,
					varietyType: item.varietyType,
					gold: this.gold,
					contractsCode: item.contractsCode
				},
				params: {
					batchNo: item.batchNo,
					varietyType: item.varietyType,
					gold: this.gold,
					contractsCode: item.contractsCode
				}
			})
		},
		sell(item) {
			axios({
				methods: 'post',
				url: '/order/newOrder/unwindNewOrder.do',
				params: {
					payType: this.gold ? 0 : 1,
					batchNo: item.batchNo,
					unwindPrice: item.lastPrice
				}
			}).then(res => {
				res = res.data
				MessageBox('平仓', res.msg)
				setTimeout(() => {
					this.$store.dispatch('getUserInfo')
				}, 2000)
			})
		}
	}
}
</script>
<style scoped lang='scss'>
.cube {
	line-height: rem(16px);
	height: rem(16px);
	width: rem(16px);
	margin-top: rem(6px);
	border-radius: rem(2px);
}
.list li strong {
	width: rem(4px);
	float: left;
}
.list li .wrap {
	flex: 1;
}
.list li p:first-child {
	border-bottom: 1px solid #f4f4f4;
}
.list li .wind img {
	vertical-align: rem(-3px);
}
.action {
	display: flex;
	justify-content: space-around;
	text-align: center;
	border-top: 1px solid #f4f4f4;
}
.action img {
	vertical-align: rem(-2px);
}
.action span {
	box-sizing: border-box;
}
.action strong {
	margin: 0 auto;
}
.action span:last-child {
	border-right: 0 none;
}
.name {
	width: rem(45px);
}
.hand {
	width: rem(40px);
}
</style>